<template>
    <div>
    <h1>显示页面</h1>
    </div>

    房号：
    <input type="text" v-model="yeta.name">
       房号：
     <select v-model="yeta.stareID">
        <option value="-1">==请选择房型==</option>
        <option v-for="a in obj":value="a.stareID">{{a.stareName}}</option>
     </select>

                <input type="button" value="查询" @click="sets()">       
    <table class="table">
     <thead>
         <tr>
            <td>房号</td>
            <td>时间</td>
            <td>手机号</td>
            <td>标题</td>
            <td>图片</td>
            <td>地址</td>
            <td>房型</td>
            <td>操作</td>
         </tr>
     </thead>

        <tbody>
         <tr v-for="a in data">
            <td>{{a.stareRongName}}</td>
            <td>{{a.stareRongTime}}</td>
            <td>{{a.phone}}</td>
            <td>{{a.name}}</td>
            <td><img style="height:60px;width:60px;" :src="axios.defaults.baseURL+a.stareRongImg"></td>
            <td>{{a.adds}}</td>
            <td>{{a.stareName}}</td>
            <td></td>
         </tr>
     </tbody>
    </table>
         一共{{yeta.count}}条，每页显示{{yeta.size}}条，一共第{{yeta.mumber}}页,单前第{{yeta.index}}页
   
          <input type="button" value="首页" @click="pangsize(1)">
          <input type="button" value="上一页" @click="pangsize(2)">
          <input type="button" value="下一页" @click="pangsize(3)">
          <input type="button" value="尾页" @click="pangsize(4)">

           <input type="mumber" v-model="yeta.index" style="width: 30px; height: 30px;"> <input type="button" value="跳转" @change="sk">

      <select v-model="yeta.size" @change="pangg()">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
      </select>


</template>



<script setup lang="ts">
 import type { RefSymbol } from '@vue/reactivity';
import axios from 'axios';
 import {ref,onMounted} from 'vue';
  import {useRouter} from 'vue-router';
 const router=useRouter();


   const pangg=()=>{
       Show();
   }

    const sk=()=>{
        if(yeta.value.index<1||yeta.value.index<yeta.value.mumber){
         alert("无效")
         yeta.value.index=1;
        }
        Show();
    }
  const pangsize=(val:any)=>{
   if(val==1){
    yeta.value.index=1;
     Show();
   }

    if(val==2&&yeta.value.index>1){
   yeta.value.index--
        Show();
    }
      if(val==3&&yeta.value.index<yeta.value.mumber){
   yeta.value.index++
    Show();
      }
 if(val==4){
     yeta.value.index=yeta.value.mumber
     Show();
 }
 }
  const Show=()=>{
     axios.get("http://localhost:5183/api/StareRong/Show",{params:yeta.value}).then(res=>{
          data.value=res.data.mumber
         yeta.value.count=res.data.count
          yeta.value.mumber=Math.ceil(yeta.value.count / yeta.value.size)

     })
  }

  const sets=()=>{
  Show();
  }

   const yeta=ref({
  name:'',
  stareID:-1,
  index:1,
  size:2,
   count:0,
   mumber:0,

   })
 

  const data=ref([{
        "stareID": 2,
      "stareRongName": "qq",
      "name": "就是",
      "adds": "南昌市",
      "phone": "21212121212",
      "stareRongImg": "/pic/2e77bf7a-0959-4a4d-a4bf-c68293b368a84.jpg",
      "stareRongTime": "2025-06-12T00:00:00",
      "stareName": "四室一厅",
      "stareRongId": 24
  }])
  onMounted(()=>{
    GetStares();
    Show();
  })

   const obj=ref({
      "stareID": 0,
      "stareName": "",

   })

      const GetStares=()=>{
    axios.get("http://localhost:5183/api/Stare/GetStares").then(res=>{

          obj.value=res.data


    })

   }


</script>

<style scoped>

</style>